<template>
<div class="program-lib-swrapper">
  <div class="program-lib" >
    <!--按钮组-->
    <div class="Btns-ctrl-body btns-under-box btn-progrom-box" >

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

     <!-- <div class="search-ctrl f-l ">
        <input type="text" class="search-text" placeholder="搜索方案名称" v-model="searchStr">
        <button type="button" class="search-btn btn btn-info" @click="btnSearch(pageSize, 0)">搜索</button>
      </div>-->

      <div class="btns f-r">
        <button type="button"
                class="btn btn-info"
                @click="btnAdd" >
          新增
        </button>
        <button type="button"
                class="btn btn-info"
                @click="previewProgram" >
          预览
        </button>
        <button type="button"
                class="btn btn-warning"
                @click="upload" >
          修改
        </button>
        <button type="button"
                class="btn btn-warning"
                @click="service" >
          维护
        </button>
        <button type="button"
                class="btn btn-danger"
                @click="btnDelete" >
          删除
        </button>
      </div>
    </div>
    <div class="swrapper">
      <!--按钮组闭合-->
      <div class="main">
        <!-- 宫格方案预览显示 -->
        <div class="bg-box" v-for="( program, index ) in dataProgramList" :key="program.id"
             :class="{'active':program.id == previewId}"
          @click="someProgramClick(index)" >
          <div class="item-content">
            <div class="program-displayname" v-text="program.displayName"></div>
            <div class="program-lib-item">
              <div class="item-swrapper" :class="program.type" v-for=" item in program.children" :key="item.id">
                <img class="menu-img" :src="PicSrc(item)" :onerror="PicErr" alt="">
                <div class="item-name-swrapper">
                  <div class="item-name" v-text="item.displayName"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 宫格方案预览显示闭合 -->
      </div>
      <!-- 分页 -->
      <pages class="pages"
        :showItem = showItem
        :allpage = allpage
        :pageSize = pageSize
        :allDataSum = allDataSum
        @current-change = currentChange >
      </pages>
      <!-- 分页闭合 -->
    </div>
    <vdialog :dialogToggle = uploadToggle
             @btnConfirm = btnConfirm >
      //头部
      <template slot="dialogHeader" >
        <p v-text="dialogTitle"></p>
      </template>
      //body
      <template slot="dialogBody" >
        <div class="even-row">
          <div class="modal-row" >
            <div class="modal-form-key f-l indispensable" v-text="dialogInputLabel.inputName"></div>
            <input class="modal-text f-l" type="text" v-model="input_Name" required="required" >
          </div>
          <div class="modal-row" >
            <div class="modal-form-key f-l indispensable" v-text="dialogInputLabel.inputDisplayName"></div>
            <input class="modal-text f-l" type="text" v-model="input_displayName" required="required" >
          </div>
          <div class="modal-row" >
            <div class="modal-form-key f-l indispensable" v-text="dialogInputLabel.inputSort"></div>
            <input class="modal-text f-l dialog-number" type="number" min="0" v-model.number="input_sort" required="required" >
          </div>
          <div class="modal-row" >
            <div class="modal-form-key f-l" >备注：</div>
            <input class="modal-text f-l" type="text" v-model="textarea_remark" >
          </div>
          <!--<div class="modal-row" >-->
            <!--<div class="modal-form-key f-l indispensable" v-text="dialogInputLabel.selectTarget"></div>-->
            <!--<select v-model="select_target" >-->
              <!--<option v-for="option in optTarget" :key="option" v-text="option"></option>-->
            <!--</select>-->
          <!--</div>-->
          <div class="modal-row" >
            <div class="modal-form-key f-l indispensable" v-text="dialogInputLabel.selectType" ></div>
            <select v-model="select_type" >
              <option v-for="option in optType" :key="option" v-text="option"></option>
            </select>
          </div>
        </div>
      </template>
    </vdialog>
  </div>
</div>

</template>

<script>
import pages from 'sudoku/atom/pages';
import vdialog from 'sudoku/atom/vdialog'
import menuLib from 'sudoku/menuLib/menuLinkLib';
import { searchMenu, addMenu, updateMenu, deleteMenu } from '@/api/menu'
import SearchPublic from "../../publicTemplate/search/SearchPublic"

export default {
  name: 'programLib',
  data() {
    return {
      PicErr: 'this.src="' + require('@/assets/error.png') + '"',  //img加载失败的图片

      searchStr: '',        //搜索框输入值

      ajaxSearchType: 2,       // 0 菜单 1 数据权限 2 方案
      showItem: 10,       //分页条下面item的数目
      allpage: 0,         //根据每页数据/总数据得到的总页数
      pageSize: 6,       //每页数据
      allDataSum: 0,      //总数据

      dataProgramList: [],      //页面初始化得数据

      addOrUpload: 'add',          // 判断弹窗是新增还是修改
      dataProgramItem: '',         //传入菜单页面的初始化数据
      previewId: '',               //传入预览页面的id

      previewProgramObj: {},
      uploadToggle: false,        //修改弹窗
      dialogTitle: '新增宫格方案',  //修改弹窗的title
      input_Name: '',              //宫格菜单code
      input_displayName: '',     //宫格方案的显示名称
      select_target: '',        //菜单目标选择值
      optTarget: ['resource','exe','img','html','menu'],        //可选的值
      dialogInputLabel: {
        "inputName": '宫格菜单code：',
        "inputDisplayName": '宫格菜单名称：',
        "selectTarget": '宫格菜单类型：',
        "selectType": '类型：',
        "inputSort": '排序：'
      },
      select_type: '',
      optType: ['九宫格', '十宫格'],
      textarea_remark: '',
      input_sort: 0,
      searchObj:{
        condition:[
          {"title":"名称","key":"name",'type':'text',"value":'','data':''},
        ],
        htmlType:"searchDefaultPublic",
      },
    }
  },
  created() {
    this.refreshPage();
  },
  components: {
    pages,
    menuLib,
    vdialog,
    SearchPublic
  },
  methods: {
    //搜索
    searchParamsFn(searchParams){
      //console.log(this.searchObj.condition);
      this.searchStr = this.searchObj.condition[0].value;
      this.btnSearch(this.pageSize, 0)
    },
    someProgramClick(index) {
      this.previewId =  this.dataProgramList[index].id;
      this.previewProgramObj = this.dataProgramList[index];
      //console.log(this.previewId);
    },
    currentChange(current) {
      /**
       * current为分页组件传递过来的当前页,后台分页是从第0页开始
       */
      this.btnSearch(this.pageSize, current - 1);
      //分页事件发生的时候要清空保存选中的数组
      // //清除样式
      // this.clearFn();
      // this.checkedItem = [];//数据
    },
    //搜索事件
    btnSearch(pageSize, current) {
      // 清除选中数据
      this.previewId = '';
      let data = {
        'name': this.searchStr,
        'curPage': current,
        'pageSize': pageSize,
        'type': this.ajaxSearchType,
      };
      this.$axios({
        url: this.HOST+'/menu/queryByName?name='
          + data.name
          + '&curPage='
          + data.curPage
          + '&pageSize='
          + data.pageSize
          + '&type='
          + data.type,
        method: 'get'
      }).then( res => {
        let data = res.data;
        let count = res.data.count;           //总数据量
        this.allpage = Math.ceil(count/this.pageSize);
        this.allDataSum = count;
        /**
         *
         */
        this.dataProgramList = data.menuList;
      })
      /*searchMenu(data).then( res => {
        let data = res.data;
        let count = res.data.count;           //总数据量
        this.allpage = Math.ceil(count/this.pageSize);
        this.allDataSum = count;
        /!**
         *
         *!/
        this.dataProgramList = data.menuList;
      })*/
    },
     /**
     * 返回文件服务的地址
     */
    PicSrc(item) {
      if(item != null && item.imgModel != null
        && item.imgModel.storeId != null){
        let storeId = item.imgModel.storeId
        return baseURL                                          //运行环境
          + 'api/jp-TIFS-FileCenter-ms/file?businessId='  //微服务地址
          + storeId
      }else if(item.imgModel == null){ // 如果imgModel为null
        return require('@/assets/error.png')
      }
    },
//    跳转到预览页面
    previewProgram() {
      if(this.previewId == '') {
        this.s_alert('请先选择');
        // alert('请先选择');
        return false;
      }
      else {
        this.$router.push({name:'previewProgram',params:{previewId:this.previewId}})
      }
    },
    // 新增
    btnAdd() {
      this.dialogTitle = '新增宫格方案';
      this.addOrUpload = 'add';
      this.input_Name = '';
      this.input_displayName = '';
      this.textarea_remark = '';
      this.input_sort = 0;
      this.select_target = 'menu';// 不选直接为menu
      this.select_type = '';
      this.uploadToggle = !this.uploadToggle;
    },
    // 修改
    upload() {
      if(this.previewId == ''){
        this.s_alert('请先选择');
        // alert('请先选择');
        return false;
      }
      else {
        this.dialogTitle = '修改宫格方案';
        this.addOrUpload = 'upload';
        this.input_Name = this.previewProgramObj.name;
        this.input_displayName = this.previewProgramObj.displayName;
        this.textarea_remark = this.previewProgramObj.remark;
        this.input_sort = this.previewProgramObj.sort;
        this.select_target = this.previewProgramObj.target;
        this.select_type = this.switchFn(this.previewProgramObj.type);
        this.uploadToggle = !this.uploadToggle;
      }
    },
    btnConfirm() {
      if(this.input_Name == '' | this.input_displayName == '' | this.select_type == '' | this.select_target == ''){
        this.s_alert('请填写带有*号的项')
        return false;
      } else if (!(/^[0-9]+$/.test(this.input_sort))) {
        this.s_alert('请正确填写排序')
        return false;
      } else {
        let type = this.switchFn(this.select_type);
        switch (this.addOrUpload){
          case 'add':
            let dataAdd = {
              "children": null,
              "displayName": this.input_displayName,
              "name": this.input_Name,
              "imgModel": null,
              "linkModel": null,
              "pid": null,
              "remark": this.textarea_remark,
              "sort": this.input_sort,
              "target": this.select_target,
              "type": type,
            }
            this.$axios({
              url:this.HOST+'/menu/add',
              method:'post',
              headers: {'content-type': 'application/json;charset=UTF-8'},
              data:JSON.stringify(dataAdd)
            }).then(res => {
//              this.dialogMSG('新增成功', 1000);
              this.uploadToggle = !this.uploadToggle;
              this.s_alert('新增成功');
              // alert('新增成功');
              this.refreshPage();
              this.s_logwrite("宫格配置-方案库","新增");
            });
           /* addMenu(dataAdd).then(res => {
//              this.dialogMSG('新增成功', 1000);
              this.uploadToggle = !this.uploadToggle;
              alert('新增成功');
              this.refreshPage();
            });*/
            break;
          case 'upload':
            let id = this.previewProgramObj.id;
            let data = {
              "children": this.previewProgramObj.children,
              "displayName": this.input_displayName,
              "id": id,
              "imgModel": this.previewProgramObj.imgModel,
              "linkModel": this.previewProgramObj.linkModel,
              "name": this.input_Name,
              "pid": this.previewProgramObj.pid,
              "remark": this.textarea_remark,
              "sort": this.input_sort,
              "target": this.select_target,
              "type": type,
            }
            this.$axios({
              url:this.HOST+'/menu/update',
              method:'post',
              headers: {'content-type': 'application/json;charset=UTF-8'},
              data:JSON.stringify(data)
            })
              .then( res => {
              this.uploadToggle = !this.uploadToggle;
              this.s_alert('修改成功！');
              // alert('修改成功')
              this.refreshPage();
              this.s_logwrite("宫格配置-方案库","修改");
            })
              .cache(err => {
                this.s_alert("修改失败！");
                //console.log(err);
              })
            /*updateMenu(data).then( res => {
              this.uploadToggle = !this.uploadToggle;
              alert('修改成功')
              this.refreshPage()
            })*/
            break;
        }
      }
    },
    refreshPage(){
      this.btnSearch(this.pageSize, 0);
    },
    //类型选择转换
    switchFn(str){
      switch (str){
        case 'WPF_9':
          return '九宫格';
        case 'WPF_10':
          return '十宫格';
        case '九宫格':
          return 'WPF_9';
        case '十宫格':
          return 'WPF_10';
      }
    },
//    维护
    service(){
      if(this.previewId == ''){
        this.s_alert('请先选择');
        // alert('请先选择');
        return false;
      }
      else {
        this.$router.push({name:'menuLinkLib', params:{dataProgramItem:this.previewProgramObj,ajaxSearchType:this.ajaxSearchType}});
      }
    },
//    删除
    btnDelete() {
      // debugger
      if (this.previewId === '') {
        this.s_alert('请先选择目标！')
      }
      if(this.previewProgramObj.children == null) {
        let data = [];
        data.push(this.previewId)
        this.$axios({
          url:this.HOST+'/menu/delete',
          method:'post',
          headers: {'content-type': 'application/json;charset=UTF-8'},
          data: data,
        }).then( res => {
          this.s_alert("删除成功")
          // alert("删除成功")
          this.refreshPage();
          this.s_logwrite("宫格配置-方案库","删除");
        })
        /*deleteMenu(data).then( res => {
          alert("删除成功")
          this.refreshPage()
        })*/
      }
      else {
        this.s_alert(this.previewProgramObj.displayName+"有子宫格菜单不能删除");
        // alert(this.previewProgramObj.displayName+"有子宫格菜单不能删除");
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.program-lib-swrapper {
  width: 100%;
  height: 100%;
  .swrapper {
    width: 100%;
    height: 100%;
    padding-bottom: 74px;
  }
  .btn-progrom-box {
    margin-bottom: 10px;
  }
}
.program-lib {
  background-color: #f7f5f5;
  height: 100%;
  .main {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    overflow: auto;
    .active {
      background-color: rgb(0, 154, 255) !important;
    }
    .bg-box {
      flex: 0 0 32.33333%;
      height: 50%;
      min-width: 366px;
      min-height: 390px;
      box-sizing: border-box;
      padding: 10px;
      margin: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      background-color: #fff;
      &:hover {
        background-color: rgb(0, 154, 255) !important;
      }
      .item-content {
        width: 100%;
        height: 100%;
        background-color: #002543;
        background-image: url(./../../../assets/bg_program.png);
        background-size: 100% 100%;
        .program-displayname {
          color: #fff;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
        }
        .program-lib-item {
          color: #fff;
          margin-top: 3%;
          padding: 0 10px 0 10px;
          height: 83%;
          display: flex;
          flex-wrap: wrap;
          overflow: auto;
          &::-webkit-scrollbar{
            display:none;
          }
          .item-swrapper {
            position: relative;
            flex: 0 0 33.3333%;
            height: 33.33333%;
            padding-top: 5%;
            min-height: 165px;
            border-radius: 4px;
            overflow: hidden;
            background-image: url(./../../../assets/bg_program_item.png);
            background-size: 100% 100%;
            .item-name-swrapper {
              position: absolute;
              bottom: 33%;
              left: 0;
              right: 0;
              .item-name {
                font-size: 12px;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .menu-img {
              width: 40px;
              display: flex;
              margin: 0 auto;
            }
          }
          .WPF_9 {
            flex: 0 0 33.3333%
          }
          .WPF_10 {
            flex: 0 0 25%;
          }
        }

      }
    }
  }
  .dialog-number {
    width: 60%;
  }
}
</style>


